<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0">
	
<title>商品详情</title>

<link href="static/Theme/css/swiper.min.css" rel="stylesheet">
<link href="static/Theme/css/base.css" rel="stylesheet">
<link href="static/Theme/css/shop.css" rel="stylesheet">
</head>

<body>
<header class="header product-header">
	<div class="header-return">
		<a href="javascript:history.go(-1);"></a>
	</div>
</header>

<section class="container product-container">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<a href="">
					<img src="static/Theme/img/pic_2-1.jpg">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="">
					<img src="static/Theme/img/pic_2-2.jpg">
				</a>
			</div>
			<div class="swiper-slide">
				<a href="">
					<img src="static/Theme/img/pic_2.jpg">
				</a>
			</div>
		</div>
		
		<div class="swiper-pagination"></div>
	</div>
	
	<!--产品信息-->
    <div class="goods-info">
        <h3>李锦记 锦珍生抽 非转基因酿造酱油 调味调料 1.65L 自营专卖 品质保证</h3>
        
        <p class="goods-price fl">
            <i>¥</i>
            <span>169.9</span>
            
            <span class="goods-original-price">¥129</span>
        </p>
        
        <p class="goods-sale fr">
            销量<span>45345件</span>
        </p>
		
		<div class="goods-collect"><!--已收藏加collected样式-->
		    <i></i>
			<span>收藏</span>
		</div>
    </div>
    
    <!--质量保证-->
    <div class="guarantee">
        <ul>
            <li>全场包邮</li>
            <li>7天退换</li>
            <li>48小时发货</li>
            <li>假一赔十</li>
        </ul>
    </div>
    
    <!--评论-->
    <div class="goods-comment">
        <div class="goods-title">
            <span class="fl">商品评价<b>(12000)</b></span>
            <a href="ProductComment.html" class="fr">查看全部</a>
        </div>
        
        <div class="goods-comment-list">
            <div class="goods-comment-author">
                <img src="static/Theme/images/member.png">
                <span>会员名字</span>
				
				<div class="goods-comment-level">
					<i class="active"></i>
					<i class="active"></i>
					<i class="active"></i>
					<i class="active"></i>
					<i></i>
				</div>
				
                <span class="fr">2018-3-21</span>
            </div>
			
            <div class="goods-comment-content">
                <p>已经是第二次买了，收到包包了，真的不错，包包软软的，皮质也好，很亮不是劣质品，上次我买了一个这个是给我婆婆买的，婆婆也非常喜欢，这两天下雪了，物流还很快，很好的卖家，看好了下手吧！！</p>
            </div>
        </div>
        
        <div class="goods-comment-list">
            <div class="goods-comment-author">
                <img src="static/Theme/images/member.png">
				
                <span>会员名字</span>
				<div class="goods-comment-level">
					<i class="active"></i>
					<i class="active"></i>
					<i class="active"></i>
					<i class="active"></i>
					<i class="active"></i>
				</div>
				
                <span class="fr">2018-3-21</span>
            </div>
			
            <div class="goods-comment-content">
                <p>已经是第二次买了，收到包包了，真的不错，包包软软的，皮质也好，很亮不是劣质品，上次我买了一个这个是给我婆婆买的，婆婆也非常喜欢，这两天下雪了，物流还很快，很好的卖家，看好了下手吧！！</p>
            </div>
        </div>
    </div>
    <div class="clr"></div>
    
    <!--产品详情正文-->
    <div class="goods-details">
        <div class="goods-title">
            <span class="fl">商品详情</span>
        </div>
        
        <div class="goods-details-content">
            <img src="static/Theme/img/sample1.jpg">
            <img src="static/Theme/img/sample2.jpg">
        </div>
    </div>
	
    <!--相关推荐-->
    <div class="goods">
		<div class="like-title">
            <h3>为你推荐</h3>
        </div>
		
        <div class="goods-box">
            <a href="ProductDetails.html">
                <div class="goods-img">
                    <img src="static/Theme/img/p1.jpg">
                </div>
                
                <h3>斜跨女包单肩斜挎包女学生韩版女包小包包2018新款春季潮时尚简约小包链条包</h3>
                
                <div class="goods-info">
                    <div class="goods-price fl">
                        <i>¥</i><b>99</b>
                    </div>
                    
                    <div class="goods-sale fr">
                        销量<span>999</span>件
                    </div>
                </div>
            </a>
        </div>
        
        <div class="goods-box">
            <a href="ProductDetails.html">
                <div class="goods-img">
                    <img src="static/Theme/img/p2.jpg">
                </div>
                
                <h3>双肩包女韩版学院风新款百搭休闲pu背包书包女学生双肩背包复古</h3>
                
                <div class="goods-info">
                    <div class="goods-price fl">
                        <i>¥</i><b>99</b>
                    </div>
                    
                    <div class="goods-sale fr">
                        销量<span>999</span>件
                    </div>
                </div>
            </a>
        </div>
        
        <div class="goods-box">
            <a href="ProductDetails.html">
                <div class="goods-img">
                    <img src="static/Theme/img/p3.jpg">
                </div>
                
                <h3>韩版百搭小清新包包日韩复古原宿学院风小方包</h3>
                
                <div class="goods-info">
                    <div class="goods-price fl">
                        <i>¥</i><b>99</b>
                    </div>
                    
                    <div class="goods-sale fr">
                        销量<span>999</span>件
                    </div>
                </div>
            </a>
        </div>
        
        <div class="goods-box">
            <a href="ProductDetails.html">
                <div class="goods-img">
                    <img src="static/Theme/img/p1.jpg">
                </div>
                
                <h3>斜跨女包单肩斜挎包女学生韩版女包小包包2018新款春季潮时尚简约小包链条包</h3>
                
                <div class="goods-info">
                    <div class="goods-price fl">
                        <i>¥</i><b>99</b>
                    </div>
                    
                    <div class="goods-sale fr">
                        销量<span>999</span>件
                    </div>
                </div>
            </a>
        </div>
		
		<div class="load-more">
			<a href="">点击加载更多</a>
		</div>
		
		<!--<div class="load-no-more">
			<span>没有更多了</span>
		</div>-->
    </div>
</section>

<!--固定操作栏-->
<div class="goods-bar">
    <div class="goods-operate">
        <div class="goods-operate-btn operate-btn-1">
            <a href="ShopIndex.html">
                <i></i>
                <span>首页</span>
            </a>
        </div>
        
        <div id="icon-cart" class="goods-operate-btn operate-btn-2">
            <a href="ShopCart.html" class="active">
                <i>
					<em>12</em>
				</i>
				
                <span>购物车</span>
            </a>
        </div>
        
        <div class="goods-operate-btn operate-btn-3">
            <a href="">
                <i></i>
                <span>客服</span>
            </a>
        </div>
    </div>
    
    <div class="goods-btn">
		<div class="cart-btn">
            <span>加入购物车</span>
        </div>
		
        <div class="buy-btn">
            <p>¥<i>169.9</i></p>
            <span>立即购买</span>
        </div>
    </div>
</div>

<div id="tips" class="success-tips">加入购物车成功</div>

<!--购买弹出窗-->
<div class="selector">
    <div class="selector-panel">
        <div class="selector-close"></div>
        
        <div class="selector-product">
            <div class="selector-product-photo">
                <img src="static/Theme/img/sample1.jpg">
            </div>
            
            <div class="selector-product-info">
                <div class="selector-product-name">
                    李锦记 锦珍生抽 非转基因酿造酱油 调味调料 1.65L 自营专卖 品质保证
                </div>
				
				<div class="selector-product-price">
                    ¥<span>32.9</span>
                </div>
            </div>
        </div>
                
        <div class="selector-number">
            <h3>选择数量</h3>
            
            <div class="number-box">
                <span class="number-minus"></span>
                <input value="1">
                <span class="number-plus"></span>
            </div>
        </div>
        
        <div class="selector-submit">
            <a href="Order.Html">确定</a>
        </div>
    </div>
</div>

<script src="static/Theme/js/jquery-1.11.2.min.js"></script>
<script src="static/Theme/js/swiper.min.js"></script>
<script src="static/Theme/js/jquery.fly.min.js"></script>

<script>
	//商品详情轮播图
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		spaceBetween: 30,
		centeredSlides: true,
		autoplay:2500,
		autoplayDisableOnInteraction: false
	});
	
	$(function(){
		
		//点击购买按钮打开面板
		$('.buy-btn').click(function(){
			$('.selector').show();

			$('body').css({'width':'100%','height':'100%','overflow':'hidden'});
		});	

		$('.selector-close').click(function(){
			$('.selector').hide();

			$('body').css({'width':'auto','height':'auto','overflow':'auto'});				  
		});
		
		//收藏按钮
		$('.goods-collect').click(function(){
			$(this).toggleClass('collected');
		});
		
		
		//加入购物车
		var distanceW = $('#icon-cart').width();
		var distanceH = $(window).height() - $('#icon-cart').height() - 20;
		
		$(".cart-btn").click(function(event) {
			
			var num = parseInt($('#icon-cart em').html());
			num++;
			$('#icon-cart em').html(num);

			//飞进去的效果
			var flyer = $('<img class="flyer-img" src="static/Theme/img/pic_2-1.jpg">');//抛物体对象
			
			flyer.fly({
				start: {
					left: distanceW*3, //抛物体起点横坐标
					top: distanceH, ////抛物体起点纵坐标
				},
				end: {
					left: distanceW, //抛物体终点横坐标
					top: distanceH, //抛物体终点纵坐标
				},
				onEnd: function() {
					$("#tips").show().delay(500).fadeOut(500); //成功加入购物车动画效果
					this.destory();//销毁抛物体
				}
			});
		});
	});
</script>
	
</body>
</html>
